<template>
  <!--  TODO 客服列表 -->
  <div class="page-container">
    <el-card class="box-card">
      <el-row>
        <el-col :span="24">
          <el-row>
            <el-date-picker v-model="dateList" type="daterange" unlink-panels range-separator=" - "
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" size="small" @change="selectTimes"
              style="flex-grow: 0;width: 240px" />
            <el-input v-model="params.name" size="small" clearable placeholder="请输入客服姓名" icon="ele-Search"
              style="width: 200px;margin-left: 20px;margin-right: 20px;" @keydown.enter="searchTable"
              @clear="clearSearch">
              <template #append>
                <el-button size="small" icon="ele-Search" @click="searchTable" />
              </template>
            </el-input>

            <el-button type="primary" size="small" @click="addUser">添加</el-button>
          </el-row>
        </el-col>
        <!-- <el-col :span="8">
          <el-row justify="end">

          </el-row>
        </el-col> -->
      </el-row>
      <div class="table-box">
        <el-table :data="tableList" size="small" class="table-box" :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }">
          <el-table-column prop="nickname" label="客服姓名" />
          <el-table-column prop="entryDate" label="等级">
            <template #default="scope">
              <el-link type="primary">等级：{{ scope.row.level }} {{ scope.row.userCustomerServiceLevel.name }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价/分钟">
            <template #default="scope">
              <el-link type="primary">{{ scope.row.userCustomerServiceLevel.num }}币/分钟</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="入职时间">
          </el-table-column>
          <el-table-column prop="num" label="在岗时间">
            <template #default="scope">
              {{ scope.row.userCustomerServiceLevel.timeRanges }}
            </template>
          </el-table-column>


          <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
              <el-button link type="primary" size="small" @click.prevent="details(scope.row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-block">
          <el-pagination v-model:currentPage="params.current" v-model:page-size="params.size"
            :page-sizes="[10, 20, 30, 40]" :small="true" :disabled="false" :background="false"
            layout="total, sizes, prev, pager, next, jumper" :total="total" :hide-on-single-page="true"
            @size-change="sizeChange" @current-change="getTableList" />
        </div>
      </div>
    </el-card>

    <add-customer-service v-model:dialogDrawer="dialogFormVisible" :defaultForm="form"  @onDetailSubmit="onDetailSubmit" :isEdit="isEdit"></add-customer-service>

  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
import { useChatApi } from '/@/api/chat/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getUserPage } from '/@/api/sys/user/index'
import AddCustomerService from './components/AddCustomerService.vue'
export default {
  name: "CustomerServiceList",
  components: {
    AddCustomerService
    },
  setup() {
    const chatApi = useChatApi()
    const state = reactive({
      tableList: [],
      isExportAll: '0',
      dateList: [],
      exportVisible: false,
      params: {
        current: 1,
        size: 10,
        name: null,
        st: null,
        et: null
      },
      total: 0,
      userParams: {
        current: 1,
        size: 10
      },
      userTableList:[],
      userTotal:10,
      multipleSelection:[],
      //添加客服
      dialogFormVisible: false,
      form:{},
      isEdit:false
    })

    //页码
    const sizeChange = (size) => {
      state.params.size = size
      state.params.current = 1
      getTableList()
    }

    //获取数据
    const getTableList = () => {
      chatApi.userShopRelationlList(state.params).then(res => {
        if (res.code == 0) {
          state.tableList = res.data.records
          state.total = res.data.total
        }
      })
    }

    // 筛选时间
    const selectTimes = (val) => {
      if (val && val.length > 0) {
        state.params.st = val[0]
        state.params.et = val[1]
      } else {
        state.params.st = state.params.et = null
      }
      getTableList()
    }

    //搜索关键字
    const searchTable = () => {
      getTableList()
    }

    //清空关键字
    const clearSearch = () => {
      state.params.keywords = ''
      getTableList()
    }

    //执行导出
    const batchExport = () => {

    }
    const addUser = () =>{
      state.dialogFormVisible = true
      state.isEdit = false
      state.form.age = 1
    }
    const userSizeChange = (val) =>{
      state.userParams.size = val
      state.userParams.current = 1
    }
    // 确认导出
    const confirmSelectUser = () =>{
        console.log( state.multipleSelection)
    }

    const handleSelectionChange = (val) =>{
        state.multipleSelection = val
    }

    // 添加编辑客服
    const onDetailSubmit =() =>{

    }

    onMounted(() => {
      getTableList()
    })
    return {
      ...toRefs(state),
      sizeChange,
      getTableList,
      selectTimes,
      searchTable,
      clearSearch,
      batchExport,
      addUser,
      userSizeChange,
      confirmSelectUser,
      handleSelectionChange,
      onDetailSubmit
    }

  }
}
</script>

<style lang="scss" scoped>
.page-container {
  .table-box {
    background: #fff;
    margin-top: 10px;

    :deep(.el-table__header-wrapper .el-table__cell) {
      background: var(--el-color-primary-light-9);
      color: var(--next-bg-menuBar-light-1);
    }

    :deep(thead .cell) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :deep(thead .el-icon) {
      margin-top: -2px;
      cursor: pointer;
    }

    .primary {
      cursor: pointer;
      color: var(--el-color-primary);
    }

  }
}
</style>
